<template>
	<div class='container'>
		<h1>多功能折线图</h1>
		<div class="box">
			<el-switch v-model="chartProps.smooth" active-text="平滑曲线" />
			<el-switch v-model="chartProps.showSymbol" active-text="显示圆点" />
		</div>
		<Line :key="chartKey" :chartDataLine="chartData" :smooth="chartProps.smooth" :showSymbol="chartProps.showSymbol"
			:tooltipFormatter="tooltipFormatter">
			<template #tooltip>
				<div class="tool-box">
					<div class="name1">{{ msg }}</div>
					<div class="name2">
						<h1>担惊受恐</h1>
					</div>
					<div class="name3">啊莱克斯顿克拉斯</div>
				</div>
			</template>
		</Line>
	</div>
</template>

<script setup>
import Line from './Line.vue'
import { ref, watch } from 'vue'

const chartData = ref([])
const chartProps = ref({
	smooth: false,
	showSymbol: false
})
const msg = ref('金卡戴珊复健科')
const setData = () => {
	chartData.value = []
	for (let i = 0; i < 20; i++) {
		let val = parseInt(Math.random() * 900 + 100)
		chartData.value.push({
			value: val
		})
	}
}
setData()
const tooltipFormatter = (params) => {
	console.log(params)
	return `<h1>哈哈哈</h1>`
}
setTimeout(() => {
	msg.value = '开始的咖啡店'
}, 1000)
const chartKey = ref(1)
watch(() => chartProps.value, (val) => {
	chartKey.value++
}, { deep: true })
</script>
<style lang='less' scoped>
.container {
	margin-top: 40px;
	width: 100%;
	height: 800px;

	#custom-id {
		width: 100%;
		height: 350px;
	}

	.box {
		display: flex;
		gap: 8px;
	}

}

:deep(.tool-box) {
	display: flex;
	align-items: center;
	gap: 8px;
	background-color: antiquewhite;

	.name1 {
		color: red;
	}
}
</style>
